<template>
    <div class="record">
        <div class="top">
            <p>{{item.remark}}</p>
        </div>
        <div class="line-10"></div>
        <div class="item">
            <p class="p1">{{text1}}</p>
            <p class="p2">{{item.amount}}</p>
        </div>
        <div class="line"></div>
        <div class="item-s">
            <p class="p1">{{text2}}</p>
            <p class="p2">{{text5}}</p>
        </div>
        <div
            class="item-s"
            v-show="state2"
        >
            <p class="p1">{{text3}}</p>
            <p class="p2">{{text4}}</p>
        </div>
        <div
            class="item-s"
            v-show="item.tax"
        >
            <p class="p1">税</p>
            <p class="p2">{{item.tax}}</p>
        </div>
        <div
            class="item-s"
            v-show="item.fee"
        >
            <p class="p1">手续费</p>
            <p class="p2">{{item.fee}}</p>
        </div>
        <!-- <div
            class="item-s"
            v-if="state1"
        >
            <p class="p1">卡号</p>
            <p class="p2">{{item.cardnum | star('bank')}}</p>
        </div> -->
        <div class="item-s">
            <p class="p1">ID</p>
            <p class="p2">{{item.id}}</p>
        </div>
        <!--<div class="item-s">-->
        <!--<p class="p1">说明</p>-->
        <!--<p class="p2">{{item.type}}</p>-->
        <!--</div>-->
        <div
            class="item-s"
            v-if="item.arrivaltime"
        >
            <p class="p1">预计到账时间</p>
            <p class="p2">{{item.arrivaltime}} </p>
        </div>
        <div
            class="item-s"
            v-else
        >
            <p class="p1">时间</p>
            <p class="p2">{{item.created}} </p>
        </div>
        <div v-if="type=='3' || type == '2'">
            <div class="line-10"></div>
            <div class="item-s">
                <div>订单号:{{product.order_id}}</div>
                <div class="time">{{product.created}}</div>
            </div>
            <div class="line"></div>
            <div class="goods-content">
                <img :src="product.pic">
                <div class="goods-body">
                    <div class="top1">
                        <div class="goods-name">{{product.name}}</div>
                        <div class="goods-price">{{product.price | moneyFmt(2, '￥')}}</div>
                    </div>
                    <div class="middle">
                        <div class="goods-title">{{product.title}}</div>
                        <div class="goods-num">x{{product.num}}</div>
                    </div>
                    <div class="bottom">
                        <div class="goods-spec">规格：{{product.tags}}</div>
                    </div>
                </div>
            </div>
            <div class="line"></div>
            <div class="item-s">
                <p class="p2">订单金额:</p>
                <p class="p3">￥{{product.unit_price}}</p>
            </div>
            <div
                class="item-s"
                v-show="item.status"
            >
                <p class="p2">订单状态:</p>
                <p class="p3">{{item.status}}</p>
            </div>
            <div class="item-s">
                <p class="p2">系统:{{item.systemname}}</p>
                <p class="p2"></p>
            </div>
        </div>
        <cusser></cusser>
    </div>
</template>
<script>
import cusser from '@/components/common/cusser';
import API from '../../request/api';

export default {
    /**
     * 资金记录详情
     */
    name: "recordDetail",
    components: { cusser },
    data() {
        return {
            item: {},
            type: '',
            text1: '',
            text2: '',
            text3: '',
            text4: '',
            text5: '',
            state1: false,
            state2: true,
            product: []


        };
    },
    created() {
        this.item = this.$route.params.info;
        this.type = this.$route.params.type;
        this.id = this.$route.params.id;
        if (this.type == '3' || this.type == '2') {
            this.request.get(API.getDetailMoney, {
                id: this.id,
                type: this.type
            }).then((res) => {
                this.text5 = res.statusname;
                this.text4 = res.nickname;
                this.item.created = res.created;
                this.item.systemname = res.systemname;
                this.item.status = res.status;
                this.item.arrivaltime = res.arrivaltime;
                this.product = res.products[0];
                console.log(res, '的飒飒打撒啊实打实的阿斯顿');
            });
        }
        this.handleText();
    },
    methods: {
        handleText() {
            //    文本显示逻辑
            if (this.type === '1') {
                //    提现
                this.text1 = '提现金额';
                this.text2 = '当前状态';
                this.text5 = this.item.statusname;
                this.text3 = '收款方';
                this.text4 = this.item.wxinfo.nickname;
                this.state1 = true;

            } else if (this.type === '2') {
                //    累计收益
                this.text1 = '返利金额';
                this.text2 = '当前状态';
                this.text3 = '来自';

            } else if (this.type === '3') {
                //    未到账
                this.text1 = '即将到帐金额';
                this.text2 = '当前状态';
                this.state2 = false;

            } else if (this.type === '5') {
                // 余额支付
                this.text1 = '支付';
                this.text2 = '当前状态';
                this.text3 = '收款方';
                this.text5 = this.item.statusname;
                this.text4 = this.item.send_uid;
            } else if (this.type === '6') {
                // 余额转账
                if (this.item.category === '1') {
                    this.text1 = '转入金额';
                    this.text3 = '来自';
                } else {
                    this.text1 = '转出金额';
                    this.text3 = '转出';
                }
                this.text4 = this.item.send_uid;
                this.text2 = '当前状态';
                this.text5 = this.item.statusname;
            }
        }
    },
    computed: {
        // symbol() {
        //     return this.item.category === '1' ? "+" : "-";
        // },
    }

};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~assets/main.styl';

.record {
    flex-y();

    .top {
        width: 100vw;
        background: white;
        box-sizing: border-box;
        flex-x(flex-start);
        padding: 2vw vw(15);

        p {
            word-vw(14px, gray3);
        }
    }

    .item {
        flex-x();
        width: 100vw;
        height: vw(45);
        background: white;
        padding: 0 vw(15);
        box-sizing: border-box;

        .p1 {
            word-vw(14px, gray9);
        }

        .p2 {
            word-vw(20px, gray3);
        }
    }

    .goods-content {
        padding: cellPadding;
        width: 100vw;
        box-sizing: border-box;
        flex-x();
        height: vw(70);
        background: grayF;

        img {
            width: vw(60);
            height: vw(60);
            background: grayF;
        }

        .goods-body {
            position: relative;
            height: vw(60);
            padding-left: smallMargin;
            flex: 1;

            .top1 {
                flex-x(space-between);
                font-size: word14;
                height: 6vw;
                width: 100%;

                .goods-name {
                    color: gray3;
                }

                .goods-price {
                    color: main-color;
                }
            }

            .middle {
                display: flex;
                justify-content: space-between;

                .goods-title {
                    word-vw(word12, gray9);
                    line-height: vw(16);
                }

                .goods-num {
                    color: gray9;
                }
            }

            .bottom {
                flex-x();
                line-height: vw(16);
                font-size: word12;

                .goods-spec {
                    color: gray6;
                }

                .goods-remark {
                    color: gray6;

                    .expandmore {
                        width: vw(8);
                        height: vw(5);
                    }
                }
            }
        }
    }

    .item-s {
        flex-x();
        width: 100vw;
        height: vw(38);
        background: white;
        padding: 0 vw(15);
        box-sizing: border-box;

        .p1 {
            word-vw(14px, gray9);
        }

        .p2 {
            word-vw(14px, gray3);
        }
    }

    .item-s {
        flex-x();
        height: vw(40);
        line-height: vw(40);
        word-vw(12px, gray3);
        background: grayF;
        padding: 0 cellPadding;

        .time {
            color: gray9;
        }
    }
}
</style>
